<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            width: 200px;
            height: 200px;
            background: pink;
            color: gray;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }

        /*.v-leave{background: black;opacity: 1}*/ /*显示状态*/
        .damu-leave-active{transition: 3s;}
        .damu-leave-to{background: red;opacity: 0} /*隐藏状态*/

        .damu-enter{background: green;opacity: 0} /*隐藏状态*/
        .damu-enter-active{transition: 3s;}
        .damu-enter-to{background: black;opacity: 1} /*显示状态*/

    </style>
</head>
<body>
    <div id="app">
        <button @click="flag=!flag">switch</button>
        <transition name="damu">
            <div class="test" v-show="flag">
                加油鸭! 各位!
            </div>
        </transition>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    /*
        1. 需要过渡的元素得运用到v-show 或 v-if指令
        2. 需要过渡的元素得使用上css过渡属性
        3. 需要过渡的元素得被一个叫transition组件包裹

        当从隐藏变为显示
            v-enter : 第一帧有用
            v-enter-active: 持续整个过渡阶段
            v-enter-to: 持续整个过渡阶段

        当从显示变为隐藏
            v-leave: 第一帧有用
            v-leave-active: 持续整个过渡阶段
            v-leave-to: 持续整个过渡阶段

    */

    Vue.config.productionTip = false;
    new Vue({
        el:"#app",
        data:{flag:true}
    })
</script>
</html>